<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page import="by.parfen.game.datamodel.Player"%>
<%@page import="by.parfen.game.datamodel.Invitation"%>
<%
	// removed to EL expression
	//String pageTitle = "Games Area";
	//String buttonTitle = "Logout";
	//String logoutPageUrl = "MainServlet";
	String linkToInvite = "/duelgame/MainServlet?page=invite&player=";
	String linkToInvitation = "/duelgame/MainServlet?page=invitation";
	String linkJoinInvitation = linkToInvitation + "&action=join&id=";
	String linkRejectInvitation = linkToInvitation + "&action=reject&id=";
%>
<c:set var="pageTitle">Games Area</c:set>
<c:set var="buttonTitle">Logout</c:set>
<c:set var="logoutPageUrl">MainServlet</c:set>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><c:out value="${pageTitle}" /></title>
<link rel="stylesheet" type="text/css" href="css/dg.css" />
<link rel="stylesheet" type="text/css" href="css/dg_tables.css" />
<link rel="stylesheet" type="text/css" href="css/dg_buttons.css" />
</head>
<body>
	<h1>
		<c:out value="${pageTitle}" />
	</h1>
	<h2>
		<c:out value="${requestScope.message}" />
	</h2>
	<div id="login" style="position: relative; float: right;">
		<span><c:out value="${sessionScope.username}"></c:out></span>
		<form id="form" action="${logoutPageUrl}" method="post">
			<input type="submit" class="button white medium" value="${buttonTitle}" /> <input type="hidden" name="page"
				value="logout">
		</form>
	</div>

	<h2>Invitations</h2>
	<table class="dataview">
		<thead>
			<tr>
				<th>Inviter</th>
				<th></th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			<c:forEach items="${requestScope.invitations}" var="invitation">
				<td><c:out value="${invitation.player1}" /></td>
				<td align="center"><a href="<%=linkJoinInvitation%>${invitation.id}" class="button medium orange">Join</a></td>
				<td align="center"><a href="<%=linkRejectInvitation%>${invitation.id}" class="button medium orange">Reject</a></td>
			</c:forEach>
		</tbody>
	</table>

	<h2>Available players</h2>
	<table class="dataview">
		<thead>
			<tr>
				<th>Player</th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			<c:forEach items="${requestScope.availablePlayers}" var="player">
				<c:set var="inviteLink" value="${linkToInvite} ${player.name}" />
				<tr>
					<td><c:out value="${player.name}"></c:out></td>
					<td align="center"><a href="<%=linkToInvite%>${player.name}" class="button medium orange">Invite</a></td>
				</tr>
			</c:forEach>
		</tbody>
	</table>

	<h2>Active games</h2>
	<table class="dataview">
		<thead>
			<tr>
				<th>Game</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Game1 name</td>
			</tr>
			<tr>
				<td>Game2 name</td>
			</tr>
			<tr>
				<td>Game3 name</td>
			</tr>
			<tr>
				<td>Game4 name</td>
			</tr>
		</tbody>
	</table>

	<div id="messages"></div>
  <script type="text/javascript">
    var webSocket = 
      new WebSocket('ws://localhost:8180/duelgame/websocket-game/root');

    webSocket.onerror = function(event) {
      onError('ws onError: '+event)
    };

    webSocket.onopen = function(event) {
      onOpen(event)
    };

    webSocket.onmessage = function(event) {
      onMessage(event)
    };

    function onMessage(event) {
      document.getElementById('messages').innerHTML 
      += '<br />' + event.data;
    	if (event.data.indexOf("NEW_PLAYER") > 0) {
 	      document.getElementById('messages').innerHTML 
 	        += '<br />' + 'Refresh player list!';
    	}
    }

    function onOpen(event) {
      document.getElementById('messages').innerHTML 
        = 'Connection established';
    }

    function onError(event) {
      alert('onError: '+event.data);
    }

    function start() {
        webSocket.send('hello');
        return false;
    }
    function stop() {
        webSocket.close();
        document.getElementById('messages').innerHTML 
        += '<br />' + 'Connection closed';
        return false;
    }
  </script>
</body>
</html>
